<template>
  <div>
    <div>
      <button>近一年</button>
      <button>近半年</button>
    </div>
    <div style="display: flex;justify-content: start">
      <el-card>
        <e-charts :option="amountOption" style="height: 200px;width: 500px"></e-charts>
      </el-card>
      <el-card>
        <e-charts :option="composeOption" style="height: 200px;width: 300px"></e-charts>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {getUserEarnings} from "@/api/home/order/order";
import {onMounted, ref} from "vue";


let amountOption = ref({
  title: {
    text: '月销售额'
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: []
});
let composeOption = ref({
  title: {
    text: '收益成分占比'
  },
  series: [
  ]
})
function userEarnings() {
  //置空
  amountOption.value.series = []
  composeOption.value.series = []
  getUserEarnings().then(res => {
    //折线图横坐标
    amountOption.value.xAxis.data = res.data.earningLineItem.xaxis
    //构造echart配置所需的格式
    amountOption.value.series=[
      {
        // data: res.data.earningLineItem.values,
        data: res.data.earningLineItem.values,
        type: 'line',
        smooth: true,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 20
          }
        }
      }
    ]
    composeOption.value.series=[{
      type: 'pie',
      data: res.data.pieItems
    }]
  })
}
onMounted(()=>{
  userEarnings()
})
</script>

<style scoped>

</style>
